<!DOCTYPE html>
<html lang="en">

<head>
    <!--破解防盗链-->
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="../css/top-bar-status.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/movie.css">
    <script src="../js/components.js"></script>
    <script src="../js/movie.js" type="module"></script>
    <title>电影标题 (豆瓣)</title>
</head>
    <div id="top-nav-items">
        <ul id="top-nav-ul" style="display:inline-block;">
            <li>
                <span class="top-nav-item" onclick="alert('没有主页！哼😕')">豆瓣</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道读书！')">读书</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="window.location.href = './index.html'">电影</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道听音乐！')">音乐</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('啊这...我不好说了')">同城</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道小组！')">小组</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('跟读书有区别吗？哼😕')">阅读</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('什么年代了还听广播 原来我也听那没事了')">FM</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('没时间啦 万策尽啦！！！😱')">时间</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('拒绝超前消费!')">豆品</span>
            </li>
        </ul>
        <div id="top-nav-right-items">
            <ul id="top-nav-right-ul">
                <li>
                    <span class="top-nav-item" onclick="alert('flutter在学了😭')">下载豆瓣客户端</span>
                </li>
                <li>
                    <span class="top-nav-item" id="login-nav-item">登录/注册</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="search-area">
        <div id="search-content">
            <div id="nav-logo" onclick="window.location.href = './index.html'"></div>
            <div id="nav-search">
                <fieldset style="display: inline-flex;border: 0px;">
                    <label for="inp-query"></label>
                    <div class="inp">
                        <input id="inp-query" class="card" name="search_text" size="22" maxlength="60"
                                placeholder="搜索电影、电视剧、综艺、影人" autocompelete="off">
                    </div>
                    <div class="inp-btn">
                        <input type="submit" value="搜索">
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <script>
        const types = [
            "我看",
            "影讯&购票",
            "选电影",
            "电视剧",
            "排行榜",
            "分类",
            "影评",
            "2021年度榜单",
            "2021书影音报告",
        ]
        const tl = new TabLayout(types, tab => {
            switch (tab) {
                case "我看": {
                    window.location.href = "../index.html"
                    break
                }
                default: {
                    alert("未实现")
                }
            }
            return false
        })
        tl.style = "position: relative;left: 225px;width: fit-content;"
        document.querySelector("body").appendChild(tl)
    </script>
    <div class="content-box">
        <h1 class="movie-title">电影标题 <span style="color: #888888;font-size: 25px;">(2022)</span></h1>
        <div class="flex-box">
            <img id="mainpic" src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png"
                title="点击看更多海报" alt="" rel="v:image">
            <div id="movie-info">
                <div>导演: <span id="director">xxx</span></div>
                <div>编剧: <span id="writers">xxx</span></div>
                <div>主演: <span id="characters">xxx</span></div>
                <div>类型: <span id="type">xxx</span></div>
                <div>制片国家/地区: <span id="region">xxx</span></div>
                <div>语言: <span id="language">xxx</span></div>
                <div>上映日期: <span id="release">xxx</span></div>
                <div>片长: <span id="period">xxx</span>分钟</div>
                <div>又名: <span id="nicknames">xxx</span></div>
                <div>IMDb: <span id="IMDb">xxx</span></div>
            </div>
            <div id="evaluate-box">
                <div id="evaluate-box-top">
                    <p style="font-size:small;">豆瓣评分</p>
                    <h2 style="color: #494949;font-weight: 500;font-size: 30px;margin-top: 5px;">
                        <span id="score">9.9</span> <span style="font-size: 10px;position: relative;bottom: 6px;">⭐⭐⭐⭐⭐</span>
                    </h2>
                    <p>5星: <span class="bar"></span> <span class="bar-value">80%</span></p>
                    <p>4星: <span class="bar"></span> <span class="bar-value">10%</span></p>
                    <p>3星: <span class="bar"></span> <span class="bar-value">5%</span></p>
                    <p>2星: <span class="bar"></span> <span class="bar-value">2%</span></p>
                    <p>1星: <span class="bar"></span> <span class="bar-value">3%</span></p>
                </div>
                <div id="evaluate-box-bottom">
                    <p style="color: #888888;font-size: xx-small;">你所热爱的，就是你的生活 :)</p>
                </div>
            </div>
        </div>
        <button>想看</button>
        <button>看过</button>
        <span style="font-size: medium;color: #494949;">   评分: </span>
        <ranking-stars></ranking-stars>
        <div class="action-line">
            <img
                src="https://img3.doubanio.com/f/shire/cc03d0fcf32b7ce3af7b160a0b85e5e66b47cc42/pics/short-comment.gif">
            <span id="short-comment-btn">写短评</span>
            <img src="https://img3.doubanio.com/f/shire/5bbf02b7b5ec12b23e214a580b6f9e481108488c/pics/add-review.gif">
            <span id="movie-comment-btn">写影评</span>
            <span id="add-to-list-btn">添加到片单</span>
        </div>
        <h2 class="sub-title">电影名称的剧情简介 · · · · · ·</h2>
        <p id="introduce">毕生追求男主梦的魏成功（魏翔 饰）终于得到了女明星米兰（马丽 饰）的“赏识”，被邀请出演她的男一号“杀手卡尔”，他兴致勃勃诠释角色的同时，却没想到已经落入了一场危机四伏的阴谋，但他依然借自己
            “精湛”的演技和绝佳的运气化险为夷，而残酷的真相也离他越来越近……</p>
        <h2 class="sub-title">电影名称的演职员 · · · · · · <span>( 全部 ? )</span></h2>
        <div id="actor-container" style="display: flex;margin-bottom: 20px; flex-wrap: wrap;">
            <!-- <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card>
            <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card>
            <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card>
            <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card>
            <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card>
            <actor-card src="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" actor="蕾米"
                job="导演"></actor-card> -->
        </div>
        <h2 class="sub-title">电影名称的短评 · · · · · ·</h2>
        <div id="short-comment-container">
            <short-comment user="寒雨" score="5" time="2022-02-01 10:46:17" content="这是一部好电影，我很喜欢。" stars="233"
                type="after"></short-comment>
            <short-comment user="寒雨" score="5" time="2022-02-01 10:46:17" content="这是一部好电影，我很喜欢。" stars="233"
                type="after"></short-comment>
            <short-comment user="寒雨" score="5" time="2022-02-01 10:46:17" content="这是一部好电影，我很喜欢。" stars="233"
                type="after"></short-comment>
            <short-comment user="寒雨" score="5" time="2022-02-01 10:46:17" content="这是一部好电影，我很喜欢。" stars="233"
                type="after"></short-comment>
        </div>
        <script>
            async function onloadMoreShortComment() {
                const container = document.getElementById("short-comment-container");
                const movieId = localStorage.getItem("movieId");
                const page = this.shortCommentPage || 0;
                const afterData = await fetch(`https://api.douban.skygard.cn:8080/subjects/${movieId}/comments?start=${page * 20}&type=after`).then(res => res.json());
                const beforeData = await fetch(`https://api.douban.skygard.cn:8080/subjects/${movieId}/comments?start=${page * 20}&type=before`).then(res => res.json());
                const data = [...afterData.data, ...beforeData.data];
                data.forEach(async item => {
                    const shortComment = document.createElement("short-comment");
                    const user = await fetch(`https://api.douban.skygard.cn:8080/users/${item.uid}`).then(res => res.json());
                    shortComment.setAttribute("user", user.data.username);
                    shortComment.setAttribute("score", item.score);
                    shortComment.setAttribute("time", item.date.replace("T", " ").replace("Z", ""));
                    shortComment.setAttribute("content", item.content);
                    shortComment.setAttribute("stars", item.stars);
                    shortComment.setAttribute("type", item.type);
                    container.appendChild(shortComment);
                });
                this.shortCommentPage = page + 1;
                return data.length != 0;
            }
        </script>
        <recycler-tail onloadmore="onloadMoreShortComment()"></recycler-tail>
        <script>
            onloadMoreShortComment()
        </script>
        <h2 class="sub-title">电影名称的影评 · · · · · ·</h2>
        <div id="review-container">
            <movie-comment user="寒雨" time="2022-02-01 10:46:17" content="这是一部好电影，我很喜欢。" stars="233"
            user-icon="https://gitee.com/coldrain-moro/images_bed/raw/master/images/remilia.png" title="很好的一部电影"
            score="5"></movie-comment>
        </div>
        <script>
            async function onloadMoreReviews() {
                const container = document.getElementById("review-container");
                const movieId = localStorage.getItem("movieId");
                const page = this.reviewsPage || 0;
                const afterData = await fetch(`https://api.douban.skygard.cn:8080/subjects/${movieId}/reviews?start=${page * 20}&type=after`).then(res => res.json());
                const beforeData = await fetch(`https://api.douban.skygard.cn:8080/subjects/${movieId}/reviews?start=${page * 20}&type=before`).then(res => res.json());
                const data = afterData.data.concat(beforeData.data);
                data.forEach(async item => {
                    const review = document.createElement("movie-comment");
                    review.setAttribute("user", item.username);
                    review.setAttribute("time", item.date.replace("T", " ").replace("Z", ""));
                    review.setAttribute("content", item.brief);
                    review.setAttribute("stars", item.stars);
                    review.setAttribute("user-icon", item.avatar);
                    review.setAttribute("title", item.name);
                    review.setAttribute("score", item.score);
                    container.appendChild(review);
                });
                this.reviewsPage = page + 1;
                return data.length != 0;
            }
        </script>
        <recycler-tail onloadmore="onloadMoreReviews()"></recycler-tail>
        <script>
            onloadMoreReviews()
        </script>
        <h2 class="sub-title" style="margin-bottom: 30px;">讨论区 · · · · · ·</h2>
        <div id="discussion-container">
            <single-discussion style="width: 100%;margin: 10px 0px;"></single-discussion>
            <single-discussion style="width: 100%;margin: 10px 0px;"></single-discussion>
            <single-discussion style="width: 100%;margin: 10px 0px;"></single-discussion>
            <single-discussion style="width: 100%;margin: 10px 0px;"></single-discussion>
            <single-discussion style="width: 100%;margin: 10px 0px;"></single-discussion>
        </div>
        <recycler-tail onloadmore="onloadMoreReviews()"></recycler-tail>
    </div>
    <!--写短评的dialog-->
    <div class="dialog-box">
        <div class="dialog">
            <div class="dialog-topbar">
                <span style="color: #007722;">添加收藏: 写短评</span>
                <span class="dialog-closer">x</span>
            </div>
            <div class="dialog-content">
                <div>
                    <label class="checkbox-label" for="wish-to-watch" style="margin-right: 20px;"><input type="radio" id="wish-to-watch" name="type" checked> 想看  </label>
                    <label class="checkbox-label" for="watched" style="margin-right: 20px;"><input type="radio" id="watched" name="type"> 看过  </label>
                    <ranking-stars></ranking-stars>
                </div>
                <p class="dialog-title">标签(多个标签用,分隔):</p>
                <input type="text" class="dialog-input" placeholder="标签(多个标签用,分隔)">
                <p class="dialog-title">简短评论:</p>
                <textarea class="dialog-input" placeholder="简短评论" style="width: 80%;"></textarea>
            </div>
            <div class="dialog-tail">
                <button class="dialog-button">保存</button>
            </div>
        </div>
    </div>
    <!--写影评的dialog-->
    <div class="dialog-box">
        <div class="dialog">
            <div class="dialog-topbar">
                <span style="color: #007722;">添加收藏: 写影评</span>
                <span class="dialog-closer">x</span>
            </div>
            <div class="dialog-content">
                <div>
                    <span>评分:</span>
                    <ranking-stars></ranking-stars>
                </div>
                <p class="dialog-title">标题:</p>
                <input type="text" class="dialog-input" placeholder="影评标题">
                <p class="dialog-title">影评:</p>
                <textarea class="dialog-input" placeholder="简短评论" style="width: 80%;"></textarea>
            </div>
            <div class="dialog-tail">
                <button class="dialog-button">保存</button>
            </div>
        </div>
    </div>
    <!--添加到片单的dialog-->
    <div class="dialog-box">
        <div class="dialog">
            <div class="dialog-topbar">
                <span style="color: #007722;">添加到片单</span>
                <span class="dialog-closer">x</span>
            </div>
            <div class="dialog-content add-to-list-content" style="padding-left: 0px;">
                <div class="left">
                    <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2724443759.webp" alt="" srcset="">
                    <p style="font-size: 16px; margin-top: 10px;color: #888888;">扬名立万</p>
                </div>
                <div class="right-top">
                    <span style="font-size: 18px;color: #888888;">选择片单</span>
                    <button style="color: #888888;">创建片单</button>
                </div>
                <div class="right-bottom">
                    <div style="color: #888888;font-size: 16px;margin-bottom: 10px;">推荐语 (选填)</div>
                    <textarea class="dialog-input" placeholder="告诉大家你添加它的理由吧" style="width: 80%;height: 30px;border-radius: 5px;"></textarea>
                </div>
            </div>
            <div class="dialog-tail">
                <button class="dialog-button">确认</button>
            </div>
        </div>
    </div>
</body>
</html>